let sideBar1 = document.querySelector('.sideBar1')
console.log(sideBar1)
$.get(categoryListApi,(res)=>{
	console.log(res.info)
	//界面初始化   品类界面
	
	//侧边导航栏1
	let productListsArr = res.info
	let sideBar1Html = '';
	for(let i=0;i<productListsArr.length;i++){
		sideBar1Html += `
			<li data-id="${productListsArr[i].categoryId}">
				<a href="javascript:;">${productListsArr[i].categoryName}</a><span></span>
			</li>
		`
	}
	
	let startObj = productListsArr.find(v=>v.categoryId==1)
	sideBar1.innerHTML = sideBar1Html
	let sideBar1Buttons = document.querySelectorAll('.classify-brandC .sideBar1 li')
	
	let oDiv = document.createElement('div')
	oDiv.className = 'item'
	let productSecondListsArr = startObj.classList
	let productHtml=''
	for(let i=0;i<productSecondListsArr.length;i++){
		 productHtml +=`
				<h3>
					<span></span>
					<span>${productSecondListsArr[i].className}</span>
					<span></span>
				</h3>
				<section data-id="${productSecondListsArr[i].classId}" class="products">
				</section>
		`
	}
	oDiv.setAttribute('data-id','1')
	
	oDiv.innerHTML = productHtml
	$('.right')[0].appendChild(oDiv)
	for(let i=0;i<$('.products').length;i++){
		let html = ''
		productsArr = productSecondListsArr[i].kindList;
		for(let j=0;j<productsArr.length;j++){
			html += `
				<dl>
					<dt>
						<img src="${productsArr[j].imgUrl}" alt="">
					</dt>
					<dd>${productsArr[j].kindName}</dd>
				</dl>
			`
			
		}
		$('.products')[i].innerHTML = html
	}
	sideBar1Buttons[0].className="active"
	
	
	//选项卡
	for(let i=0;i<sideBar1Buttons.length;i++){
		
		//给每一个按钮增加点击事件
		sideBar1Buttons[i].onclick=function(){
			
			//点击时按钮发生css样式变化
			for(let k=0;k<sideBar1Buttons.length;k++){
				sideBar1Buttons[k].className = ''
			}
			sideBar1Buttons[i].className='active'
			
			//获取每一个按钮对应的商品列表信息
			let pid = this.getAttribute('data-id')
			let pObj = productListsArr.find(v=>v.categoryId==pid)
			let productSecondListsArr = pObj.classList
			oDiv.setAttribute('data-id',`${pid}`)
			let productHtml = ''
			
			//建立标题  商品分类  内搭等
			for(let i=0;i<productSecondListsArr.length;i++){
				 productHtml +=`
						<h3>
							<span></span>
							<span>${productSecondListsArr[i].className}</span>
							<span></span>
						</h3>
						<section data-id="${productSecondListsArr[i].classId}" class="products">
						</section>
				`
			}
			oDiv.innerHTML = productHtml
			$('.right')[0].appendChild(oDiv)
			
			
			//给每一个分类下面增添详细内容
			for(let i=0;i<$('.products').length;i++){
				let html = ''
				console.log(productSecondListsArr[i])
				productsArr = productSecondListsArr[i].kindList;
				console.log(productsArr)
				for(let j=0;j<productsArr.length;j++){
					html += `
						<dl>
							<dt>
								<img src="${productsArr[j].imgUrl}" alt="">
							</dt>
							<dd>${productsArr[j].kindName}</dd>
						</dl>
					`
				}
				$('.products')[i].innerHTML = html
			}
		}
	}
	
	
})



/***************品牌logo*************/
function toNewPageEvents(){
	let pImgBtns = $('.pPoint')
	for(i=0;i<pImgBtns.length;i++){
		pImgBtns[i].onclick=function(){
			console.log(this,this.getAttribute('data-id'))
			let brandId = this.getAttribute('data-id')
			localStorage.setItem('brandId',brandId)
			location.href="productstList.html"
		}
	}
}
let sideBar2Btns=document.querySelectorAll('.sideBar2 li')
console.log(sideBar2Btns)
let DataUrl=sideBar2Btns[0].getAttribute('data-url')
let goodsControllerApi='http://106.13.115.175:8080/elleshop'
goodsControllerApi += DataUrl
$.get(goodsControllerApi,{
	
},(res)=>{
	console.log(res.info)
	let html=''
	for(let i=0;i<res.info.length;i++){
		html+=`<span data-id="${res.info[i].brandId}">
			<a href="productstList.html?brandId=${res.info[i].brandId}">
			<img class="pPoint" data-id="${res.info[i].brandId}" src="${res.info[i].brandLogoUrl}" alt="">
			</a>
			</span>`
	}
	let pic=document.querySelector('.pic')
	console.log(pic)
	pic.innerHTML=html
	toNewPageEvents()
})

for(let i=0;i<sideBar2Btns.length;i++){
	sideBar2Btns[i].onclick=function(){
		
		let DataUrl=this.getAttribute('data-url')
		let goodsControllerApi='http://106.13.115.175:8080/elleshop'
		goodsControllerApi += DataUrl
		console.log(goodsControllerApi)
		
		$.get(goodsControllerApi,{
			
		},(res)=>{
			console.log(res.info)
			let html=''
			for(let i=0;i<res.info.length;i++){
				html+=`<span data-id="${res.info[i].brandId}">
					<a href="productstList.html?brandId=${res.info[i].brandId}">
						<img class="pPoint" data-id="${res.info[i].brandId}" src="${res.info[i].brandLogoUrl}" alt="">
					</a>
					</span>`
			}
			let pic=document.querySelector('.pic')
			console.log(pic)
			pic.innerHTML=html
			toNewPageEvents()
		})
		for(let j=0;j<sideBar2Btns.length;j++){
			sideBar2Btns[j].className=''
		}
		this.className='active'
	}
}
	sideBar2Btns[2].onclick=function(){
		let pic=document.querySelector('.pic')
		pic.innerHTML = ''
		for(let i=0;i<sideBar2Btns.length;i++){
			sideBar2Btns[i].className = ''
		}
		this.className='active'
		let goodsControllerApi='http://106.13.115.175:8080/elleshop/showBrandByCategory'
		
		$.get(goodsControllerApi,{
			
		},(res)=>{
			console.log(res.info)
			let html=''
			for(let i=0;i<res.info.length;i++){
				html+=`<h3>
					<span></span>
					<span>${res.info[i].categoryName}</span>
					<span></span>
				</h3>
				<section data-id="${res.info[i].categoryId}" class="products">
				</section>
		`
			}
			pic.innerHTML = html
			console.log($('.pic .products'))
			let products=document.querySelectorAll('.pic .products')
			let html2=''
			for(let i=0;i<products.length;i++){
				console.log(products[i])
				console.log(res.info[i].brands)
				let productsArr = res.info[i].brands
				for(let k=0;k<productsArr.length;k++){
					html2+=`
						<dl>
							<dt data-id="${productsArr[k].brandId}">
							<a href="productstList.html?brandId=${productsArr[k].brandId}">
								<img class="pPoint" data-id="${productsArr[k].brandId}" src="${productsArr[k].brandLogoUrl}" alt="">
							</a>
							</dt>
							<dd>${productsArr[k].brandName}</dd>
						</dl>
					`
				}
				products[i].innerHTML=html2
			}
			toNewPageEvents()
		})
	}
	
	sideBar2Btns[3].onclick=function(){
		let pic=document.querySelector('.pic')
		pic.innerHTML = ''
		for(let i=0;i<sideBar2Btns.length;i++){
			sideBar2Btns[i].className = ''
		}
		this.className='active'
		let goodsControllerApi='http://106.13.115.175:8080/elleshop/showBrandByStyle'
		$.get(goodsControllerApi,{
			
		},(res)=>{
			console.log(res.info)
			let html3=''
			for(let i=0;i<res.info.length;i++){
				html3+=`
					<h3>
						<span></span>
						<span>${res.info[i].styleName}</span>
						<span></span>
					</h3>
					<section data-id="${res.info[i].styleId}" class="products">
					</section>
				`
			}
			pic.innerHTML=html3
			console.log($('.pic .products'))
			let products=document.querySelectorAll('.pic .products')
			
			for(let i=0;i<products.length;i++){
				let html4=''
				let productsArr = res.info[i].brands
				
				for(let j=0;j<productsArr.length;j++){
					console.log(productsArr[j])
					html4+=`
						<dl>
							<dt data-id="${productsArr[j].brandId}">
							<a href="productstList.html?brandId=${productsArr[j].brandId}">
								<img class="pPoint" data-id="${productsArr[j].brandId}" src="${productsArr[j].brandLogoUrl}" alt="">
							</a>
							</dt>
							<dd>${productsArr[j]. brandName}</dd>
						</dl>
					`
				}
				products[i].innerHTML=html4
			}
			toNewPageEvents()
		})
	}
	
	sideBar2Btns[4].onclick=function(){
		let pic=document.querySelector('.pic')
		pic.innerHTML = ''
		for(let i=0;i<sideBar2Btns.length;i++){
			sideBar2Btns[i].className = ''
		}
		this.className='active'
		let goodsControllerApi='http://106.13.115.175:8080/elleshop/showBrandByArea'
		$.get(goodsControllerApi,{
			
		},(res)=>{
			console.log(res.info)
			let html3=''
			for(let i=0;i<res.info.length;i++){
				html3+=`
					<h3>
						<span></span>
						<span>${res.info[i].areaName}</span>
						<span></span>
					</h3>
					<section data-id="${res.info[i].areaId}" class="products">
					</section>
				`
			}
			pic.innerHTML=html3
			console.log($('.pic .products'))
			let products=document.querySelectorAll('.pic .products')
			
			for(let i=0;i<products.length;i++){
				let html4=''
				let productsArr = res.info[i].brands
				
				for(let j=0;j<productsArr.length;j++){
					console.log(productsArr[j])
					html4+=`
						<dl>
							<dt data-id="${productsArr[j].brandId}">
							<a href="productstList.html?brandId=${productsArr[j].brandId}">
								<img class="pPoint" data-id="${productsArr[j].brandId}" src="${productsArr[j].brandLogoUrl}" alt="">
							</a>
							</dt>
							<dd>${productsArr[j]. brandName}</dd>
						</dl>
					`
				}
				products[i].innerHTML=html4
			}
			toNewPageEvents()
		})
	}
